<template>
  <div class="container">
    <div
      class="news-header"
      :style="{
        backgroundImage: `url(${image})`,
      }"
    ></div>

    <div class="search">
      <el-popover
        placement="bottom"
        title="检索结果"
        width="50%"
        content="this is content, this is content, this is content"
        :visible="visible"
      >
        <template #reference>
          <el-input
            v-model="searchText"
            placeholder="请输入新闻关键字"
            :prefix-icon="Search"
            type="search"
            size="large"
            @input="visible = true"
            @blur="visible = false"
          />
        </template>
        <div v-if="searchnewslist.length">
          <div
            v-for="data in searchnewslist"
            :key="data.id"
            class="search-item"
            @click="handleChangePage(data.id)"
          >
            {{ data.title }}
          </div>
        </div>
        <div v-else>
          <el-empty description="暂无新闻" :image-size="50" />
        </div>
      </el-popover>
    </div>
    <div class="topnews">
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in TopNewsList" :key="item.id"
          ><el-card
            style="max-width: 480px"
            shadow="hover"
            @click="handleChangePage(item.id)"
          >
            <div
              class="image"
              :style="{
                backgroundImage: `url(http://localhost:3000${item.cover})`,
              }"
            ></div>
            <div style="padding: 14px">
              <span>{{ item.title }}</span>
              <div class="bottom">
                <time class="time">{{
                  dayjs(item.editTime).format("YYYY年MM月DD日 HH:mm")
                }}</time>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-tabs style="margin: 20px" v-model="whichTab" class="demo-tabs">
      <el-tab-pane
        v-for="item in tablist"
        :label="item.label"
        :name="item.name"
        :key="item.name"
      >
        <el-row :gutter="20">
          <el-col :span="18">
            <div
              v-for="data in tabnews[item.name]"
              :key="data.id"
              style="padding: 5px"
            >
              <el-card
                shadow="hover"
                class="tab_el-card"
                @click="handleChangePage(data.id)"
              >
                <div
                  class="tab-image"
                  :style="{
                    backgroundImage: `url(http://localhost:3000${data.cover})`,
                  }"
                ></div>
                <div style="padding: 14px; float: left">
                  <span>{{ data.title }}</span>
                  <div class="bottom">
                    <time class="time">{{
                      dayjs(data.editTime).format("YYYY年MM月DD日 HH:mm")
                    }}</time>
                  </div>
                </div>
              </el-card>
            </div>
          </el-col>
          <el-col :span="6">
            <el-timeline style="max-width: 600px">
              <el-timeline-item
                v-for="(data, index) in tabnews[item.name]"
                :key="index"
                :timestamp="dayjs(data.editTime).format('YYYY年MM月DD日 HH:mm')"
              >
                {{ data.title }}
              </el-timeline-item>
            </el-timeline>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <el-backtop :visibility-height="100" />
  </div>
</template>

<script setup name="">
import newsbj from "@/assets/newsbj.png";
import { Search } from "@element-plus/icons-vue";
import { ref, onMounted, computed } from "vue";
import axiosInstance from "../api/axios";
import { dayjs } from "element-plus";
import "dayjs/locale/zh-cn";
import _ from "lodash";
import { useRouter } from "vue-router";

const searchText = ref("");
const image = ref(newsbj);
const visible = ref(false);
const newslist = ref([]);
const whichTab = ref(1);
onMounted(async () => {
  const res = await axiosInstance.get("/webapi/news/list");
  newslist.value = res.data.result;
});

const searchnewslist = computed(() =>
  searchText.value
    ? newslist.value.filter((item) => item.title.includes(searchText.value))
    : []
);

const TopNewsList = computed(() => newslist.value.slice(0, 4));

const tablist = [
  {
    label: "最新动态",
    name: 1,
  },
  {
    label: "典型案例",
    name: 2,
  },
  {
    label: "通知公告",
    name: 3,
  },
];

//分完组之后的返回值
const tabnews = computed(() =>
  _.groupBy(newslist.value, (item) => item.category)
);

const router = useRouter();
const handleChangePage = (id) => {
  // console.log(id);
  router.push(`/news/${id}`);
};
</script>

<style scoped lang="scss">
.container {
  position: relative;
}
.news-header {
  width: 100%;
  height: 400px;
  background-size: cover;
}
.search {
  position: absolute;
  top: 330px;
  width: 100%;
  text-align: center;
  .el-input {
    width: 50%;
  }
}
.search-item {
  height: 50px;
  line-height: 50px;
  &:hover {
    background: whitesmoke;
    color: pink;
  }
}

.topnews {
  margin: 20px;
  .image {
    width: 100%;
    height: 200px;
    background-size: cover;
  }
}
.el-card {
  height: 360px;
}
.tab_el-card {
  height: 130px;
}
.time {
  font-size: 13px;
  color: gray;
}
.tab-image {
  width: 150px;
  height: 100px;
  background-size: cover;
  float: left;
}
</style>
